<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 800px; height: 800px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '教学支持数据',
            left: "center",
                top: "top",
                textStyle: {
               color: '#04393c'
               }
            },
         grid: {
                show: true,
                width: '60%', height: '70%',
                backgroundColor: 'rgba(255,0,0,0.45)',
            },
            tooltip: {
               trigger: 'axis',
            axisPointer:
            {
               type: 'shadow',
               lineStyle: {
                  color: '#48b', width: 2, type: 'solid'
               },
               crossStyle: {
                  color: '#1e90ff', width: 1, type: 'dashed'
               },
               shadowStyle: {
                  color: 'rgba(150,150,150,0.2)', width: 'auto', type: 'default'
               }
            },
            showDelay: 0, hideDelay: 0, transitionDuration: 0,
            backgroundColor: 'rgba(255,0,0,0.45)',
            borderColor: '#ffffff', borderRadius: 8, borderWidth: 2,
            padding: 10,
            position: function (p) {

               return [p[0] + 10, p[1] - 10];
            },
            textStyle: {
               color: ' pink ', decoration: 'none', fontFamily: 'sans-serif',
               fontSize: 15, fontStyle: ' normal ', fontWeight: 'bold'
            },
            formatter: function (params, ticket, callback) {
               console.log(params)
               var res = '详情提示 : <br/>' + params[0].name;
               for (var i = 0, l = params.length; i < l; i++) {
                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
               }
               setTimeout(function () {
                  callback(ticket, res);
               }, 500)
               return '正在加载';
            }
            //formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
         },
            legend: {
                data: ['戚贤', '王俊星', '薄浩丹'],
            x:'left',
            y:'top'
            },
         toolbox: {
            show: true,
            borderWidth: 1.5,
            feature: {
               mark: { show: true }, dataView: { show: true, readOnly: false },
               magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
               restore: { show: true }, saveAsImage: { show: true }
            }
         },
            xAxis: {
                data: ["Java大数据", "UI", "Java"],
            splitLine: {
                show: true
              }
            },
            yAxis: {},
            series: [
            {
               name: '戚贤',
               type: 'bar',
               data: [85.50, 79.50, 90.00, ],
               markPoint: {
               data: [
                  {
                     type: 'min', name: '最小值', symbol: 'triangle', symbolSize: 20,
                     itemStyle: {
                        normal: { color: '#00ff06' }
                     },
                  },
               ]
            },
               markLine: {
               data: [
                  {
                     type: 'average', name: '平均值',
                     itemStyle:
                     {
                        normal: { borderType: 'arrow', color: 'black' }
                     },
                  }],
            },
            },
            {
                     name: '王俊星',
                    type: 'bar',
                    data: [89.00, 88.75, 89.00, ],
               markPoint: {
               data: [
                  {
                     type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
                     itemStyle: {  //设置标记点的样式
                        normal: { color: '#ffb600' }
                     },
                  },
               ]
            },
               markLine: {
               data: [
                  {
                     type: 'average', name: '平均值',
                     itemStyle:
                     {
                        normal: { borderType: 'dotted', color: 'black' }
                     },
                  }],
            },
            },
            {
                     name: '薄浩丹',
                    type: 'bar',
                    data: [95.50, 94.25, 88.75,],
               markPoint: {
               data: [
                  {
                     type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
                     itemStyle: {  //设置标记点的样式
                        normal: { color: '#DC143C' }
                     },
                  },
               ]
            },
               markLine: {
               data: [
                  {
                     type: 'average', name: '平均值',
                     itemStyle:
                     {
                        normal: { borderType: 'dotted', color: 'black' }
                     },
                  }],
            },
            },
         ]
        };

        myChart.setOption(option);
    </script>
</body>

</html>